<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>小毛驴</div>
    <script>
      const div = document.querySelector("div");
      console.dir(div);

      // 为什么要有虚拟Dom：真实Dom 属性会很多
      // 在差异化比较的时候太浪费性能，所有说用一个虚拟Dom来描述当前的节点，只要对比虚拟Dom
      // 旧虚拟Dom
      const domObj1 = {
        type: "div",
        str: "Hello",
      };

      // 新虚拟Dom
      const domObj2 = {
        type: "div",
        str: "你好！",
      };
    </script>
  </body>
</html>
